body, html{
    font-family: 'Times New Roman', Times, serif;
    height: 120%;
    width: 98vw;
    display: center;
    justify-content: center;
    align-items: center;
    background: url(fondo\ de\ físico\ matemático.jpg) center center;
    background-size: cover;
}
header {
 background-color: #4D574E;
 color: #ffffff;
 padding: 20px;
  border-radius: 10px;
 text-align: center;
}

main {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 20px;
}

section {
 background-color: #B3B2B0;
 padding: 50px;
 margin-bottom: 70px;
 border: 1px solid #4E6A5B;
  border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

p, h3{

  color: #7C3306;  
}

h2 {
 color: #00070a;
 align-items: center;
}

ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

li {
 margin-bottom: 10px;
}



#info-adicional {
 background-color: #fff;
 padding: 20px;
 border: 1px solid #ddd;
  border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

a{
    color: #E51E1B;
}

button {
   
    border: 0;
    background-image: linear-gradient(
    150deg,
    #9500ff61,
    #09f,
    #00DDFF
    );
    border-radius: 10px;
    color: #fff;
    display: center;
    font-size: 18px;
    padding: 20px;
    cursor: pointer;
    transition: .3s;
    height: auto;
    margin-left: 20px;
 }
 button span {
    background: #111;
    padding: 20px 20px;
    border-radius: 10px;
    transition: .3s;
 }
 button:hover span {
    background: none;
 }
 button:active {
    transform: scale(0.9);
 }
 .contenedor {
 display: flex;
 align-items: center;
}

.texto {
 width: 70%;
 padding: 20px;
}

.imagen {
 width: 20%;
 height: auto;
 margin-left: 20px; /* si la imagen está a la derecha del texto */
 /* o */
 margin-right: 20px; /* si la imagen está a la izquierda del texto */
}

.contenedor1 {
    flex-direction: row-reverse;
 display: flex;
 align-items: center;
}

.texto {
 width: 70%;
 padding: 20px;
}

.imagen {
 width: 20%;
 height: auto;

 margin-right: 20px; /* si la imagen está a la izquierda del texto */
}

section1{
    display: flex;
    width: 1200px;
    height: 500px;
}
section1 img{
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}
section1 img:hover{
cursor: crosshair;
width: 700px;
opacity: 1;
filter: contrast(100%);
}


